<template>
    <view class="page job-list">
      <uni-navbar 
        title="金币明细" 
        :border="false"
        :fixed="true"
        :height="barHeight"
        :rightWidth="60"
        :leftWidth="60"
        titleStyle="color:#fff;fontSize:18px;"
        bgColor="transparent"
        :placeholder="false"
        :autoBack="true"
      > 
        <view slot="left">
          <image v-if="!isMpAlipay && !isMpBaidu && !isMpToutiao" src="../../static/images/back_white2.png" class="back-icon" style="margin-left: -10rpx;"></image>
        </view>
      </uni-navbar>
  
      <scroll-view
        class="page-scroll-vi"
        :style="{paddingTop: headHt}"
        :scroll-y="true"
        :refresher-enabled="true"
        :refresher-triggered="isRefreshTrigged"
        :refresher-threshold="100"
        refresher-background="transparent"
        @refresherrefresh="onPulling"
        @scrolltolower="pageScrollBottomEv"
      >
        <view class="con-list">
          <block v-if="jobList.length">
            <view
              v-for="item in jobList"
              :key="item.id"
              class="order-list-item flex justify-between"
            >
              <view class="order-item-msg">
                <view class="flex items-center justify-between overflow-hidden font-b">
                  <view class="flex items-center overflow-hidden flex-1">
                    <text class="nowrap font16">{{ item.remarker }}</text>
                  </view>
                  <text :class="['gold-num font-semibold', [20, 22].includes(item.signType) ? 'nor-num' : '']">
                    {{ item.signType == 20 ? '-' : item.signType == 22? '' : '+' }} {{ item.golds}} 金币
                  </text>
                </view>
  
                <view class="row-company">
                  <view class="left-info">
                    {{item.applyTime}}
                  </view>
                </view>
              </view>
              
            </view>
            <view class="load-more">
              <u-loadmore :status="status" />
            </view>
          </block>
          <block v-if="!hasMoreData && !jobList.length">
            <view class="no-data">
              <view>{{noDataTxt}}</view>
            </view>
          </block>
        </view>
      </scroll-view>
    </view>
  </template>
  
  <script>
  import { QueryCoinList } from '@/pages/welfare/api/index';;
  import statusBarInfo from '@/pages/welfare/mixins/statusBarInfo'
  import { isMpAlipay, isMpBaidu, isMpToutiao } from '@/utils/platform';
  import { dateFormat } from '@/utils/util';
  
  import { staticHost } from '@/setting';
  
  
  let lastAddTime = 0;
  
  export default {
    mixins: [ statusBarInfo ],
    data() {
      return {
        staticHost,
        isMpAlipay,
        isMpBaidu,
        isMpToutiao,
        jobList: [],
        detailId: '',
        hasMoreData: true,
        
        isRefreshTrigged: false,
        status: 'loadmore',
        noDataTxt: '这里空空如也，啥都没有哦~'
      };
    },
    async onLoad(options) {
      this.refreshApplies();
    },
    methods: {
      onPulling() {
        this.isRefreshTrigged = true
        this.refreshApplies();
      },
      pageScrollBottomEv(e) {
        this.loadMore();
      },
      refreshApplies() {
        // 刷新页面数据
        lastAddTime = 0;
        this.fetchListData().then(data => {
          uni.hideLoading()
          var jobList = [];
          
          this.isRefreshTrigged = false
          if (data && data.length) {
            jobList = data || []

            var hasMoreData = true;
            hasMoreData = false
            this.setData({
              status: hasMoreData ? 'loadmore' : 'nomore',
              hasMoreData,
              jobList
            })
          } else {
            this.setData({
              status: 'nomore',
              hasMoreData: false,
              jobList
            })
          }
        }).catch(e => {
          uni.hideLoading()
          this.isRefreshTrigged = false
          uni.stopPullDownRefresh();
        }).finally((e) => {
          this.isRefreshTrigged = false;
          uni.hideLoading();
          uni.stopPullDownRefresh();
        })
      },
      loadMore() {
        if (!this.hasMoreData) {
          return
        }
        this.setData({
          status: 'loading',
        })
        this.fetchListData().then(data => {
          console.log('x333');
          if (data.records.length) {
            var jobList = this.jobList;
            data.records.forEach(per => {
              jobList.push(per)
            })
            var hasMoreData = true
            this.setData({
              status: hasMoreData ? 'loadmore' : 'nomore',
              hasMoreData,
              jobList
            })
          } else {
            this.setData({
              isLoadMore: false,
              status: 'nomore'
            })
          }
        })
      },
      // 获取job列表
      fetchListData() {
        return new Promise((resolve, reject) => {
          let params = {}
          if (lastAddTime) {
            params.lastAddTime = lastAddTime;
          }
          QueryCoinList(params).then(res => {
            if (res.code == 200 && res.data) {
              let arr = res.data || []
              arr.forEach(per => {
                per.applyTime = dateFormat('YYYY-mm-dd HH:MM', new Date(per.addTime))
              })
              this.pages = res.data.pages || 1;
              resolve(res.data)
            } else {
              reject(res)
            }
          })
        });
      },
    },
  };
  </script>
  <style lang="scss">
  .job-list {
    position: relative;
    width: 100%;
    height: 100%;
  
    .overflow-hidden {
      overflow: hidden;
    }
    .nowrap {
      flex-wrap: nowrap;
    }
    
    .page-scroll-vi {
      position: relative;
      width: 100%;
      padding: 0 32rpx 40rpx;
      overflow-y: auto;
      background: linear-gradient(180deg,#f50,#F9EEE7);
      height: 100vh;
    }
  
    .con-list {
      background: #fff;
      border-radius:  32rpx;
  
  
    .order-list-item {
      padding: 32rpx 0;
      margin: 0 32rpx;
      border-bottom: 1px solid #EAEBEF;
  
      .order-item-msg {
        display: flex;
        flex-direction: column;
        width: 100%;
        overflow: hidden;
      }

      .gold-num {
        color:#F96A35;

        &.nor-num {
          color: $grey_color;
        }
      }
      .row-company {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 12rpx;
  
        .left-info {
          color: $grey_color;
        }
      }
    }
      
    .load-more {
      margin-top: 60rpx;
      padding-bottom: 80rpx;
    }
  
      .no-data {
        text-align: center;
        height: 100%;
        width: 100%;
        background-color: #fff;
        color: $grey_color;
        font-size: 26rpx;
      }
      .no-data image {
        width: 388rpx;
        margin-top: 125rpx;
        margin-bottom: 60rpx;
      }
    }
  }
  </style>
  